<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      Picture with type attribute in source to conditionally load WebP -
      Lazyload demos
    </title>
    <style>
      body {
        margin: 0;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
      }
      ul,
      li {
        list-style-type: none;
        margin: 0;
        padding: 0;
        min-height: 160px;
      }

      a {
        display: block;
        position: relative;
        padding-bottom: 100%;
        outline: 1px solid gray;
      }

      img {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: auto;
        min-width: 10px;
      }

      img:not([src]) {
        visibility: hidden;
      }

      li {
        width: 50%;
      }

      @media (min-width: 768px) {
        li {
          width: 33.3%;
        }
      }
      @media (min-width: 1024px) {
        li {
          width: 25%;
        }
      }

      /* Fixes Firefox anomaly during image load */

      @-moz-document url-prefix() {
        img:-moz-loading {
          visibility: hidden;
        }
      }
    </style>
  </head>

  <body>
    <h1>
      Picture with type attribute in source to conditionally load WebP demo
    </h1>
    <div id="results1" class="results">
      <ul>
        <li>
          <a href="#1">
            <picture>
              <source
                type="image/webp"
                srcset="
                  https://via.placeholder.com/256.webp?text=256+WebP+Sneakers 256w,
                  https://via.placeholder.com/320.webp?text=320+WebP+Sneakers 320w,
                  https://via.placeholder.com/512.webp?text=512+WebP+Sneakers 512w,
                  https://via.placeholder.com/640.webp?text=640+WebP+Sneakers 640w,
                  https://via.placeholder.com/960.webp?text=960+WebP+Sneakers 960w
                "
                sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
              />
              <img
                src="https://via.placeholder.com/256.jpg?text=256+Jpg+Sneakers"
                srcset="
                  https://via.placeholder.com/256.jpg?text=256+Jpg+Sneakers 256w,
                  https://via.placeholder.com/320.jpg?text=320+Jpg+Sneakers 320w,
                  https://via.placeholder.com/512.jpg?text=512+Jpg+Sneakers 512w,
                  https://via.placeholder.com/640.jpg?text=640+Jpg+Sneakers 640w,
                  https://via.placeholder.com/960.jpg?text=960+Jpg+Sneakers 960w
                "
                sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
                alt="Sneakers"
              />
            </picture>
          </a>
        </li>
        <li>
          <a href="#2">
            <picture>
              <source
                type="image/webp"
                data-srcset="https://via.placeholder.com/256.webp?text=256+WebP+OpenToe 256w,
									https://via.placeholder.com/320.webp?text=320+WebP+OpenToe 320w,
									https://via.placeholder.com/512.webp?text=512+WebP+OpenToe 512w,
									https://via.placeholder.com/640.webp?text=640+WebP+OpenToe 640w,
									https://via.placeholder.com/960.webp?text=960+WebP+OpenToe 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
              />
              <img
                data-src="https://via.placeholder.com/256.jpg?text=256+Jpg+OpenToe"
                data-srcset="https://via.placeholder.com/256.jpg?text=256+Jpg+OpenToe 256w,
									https://via.placeholder.com/320.jpg?text=320+Jpg+OpenToe 320w,
									https://via.placeholder.com/512.jpg?text=512+Jpg+OpenToe 512w,
									https://via.placeholder.com/640.jpg?text=640+Jpg+OpenToe 640w,
									https://via.placeholder.com/960.jpg?text=960+Jpg+OpenToe 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
                alt="Open Toe"
                class="lazy"
              />
            </picture>
          </a>
        </li>
        <li>
          <a href="#3">
            <picture>
              <source
                type="image/webp"
                data-srcset="https://via.placeholder.com/256.webp?text=256+WebP+Stivali 256w,
									https://via.placeholder.com/320.webp?text=320+WebP+Stivali 320w,
									https://via.placeholder.com/512.webp?text=512+WebP+Stivali 512w,
									https://via.placeholder.com/640.webp?text=640+WebP+Stivali 640w,
									https://via.placeholder.com/960.webp?text=960+WebP+Stivali 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
              />
              <img
                data-src="https://via.placeholder.com/256.jpg?text=256+Jpg+Stivali"
                data-srcset="https://via.placeholder.com/256.jpg?text=256+Jpg+Stivali 256w,
									https://via.placeholder.com/320.jpg?text=320+Jpg+Stivali 320w,
									https://via.placeholder.com/512.jpg?text=512+Jpg+Stivali 512w,
									https://via.placeholder.com/640.jpg?text=640+Jpg+Stivali 640w,
									https://via.placeholder.com/960.jpg?text=960+Jpg+Stivali 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
                alt="Stivali"
                class="lazy"
              />
            </picture>
          </a>
        </li>
        <li>
          <a href="#4">
            <picture>
              <source
                type="image/webp"
                data-srcset="https://via.placeholder.com/256.webp?text=256+WebP+Stivaletti 256w,
									https://via.placeholder.com/320.webp?text=320+WebP+Stivaletti 320w,
									https://via.placeholder.com/512.webp?text=512+WebP+Stivaletti 512w,
									https://via.placeholder.com/640.webp?text=640+WebP+Stivaletti 640w,
									https://via.placeholder.com/960.webp?text=960+WebP+Stivaletti 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
              />
              <img
                data-src="https://via.placeholder.com/256.jpg?text=256+Jpg+Stivaletti"
                data-srcset="https://via.placeholder.com/256.jpg?text=256+Jpg+Stivaletti 256w,
									https://via.placeholder.com/320.jpg?text=320+Jpg+Stivaletti 320w,
									https://via.placeholder.com/512.jpg?text=512+Jpg+Stivaletti 512w,
									https://via.placeholder.com/640.jpg?text=640+Jpg+Stivaletti 640w,
									https://via.placeholder.com/960.jpg?text=960+Jpg+Stivaletti 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
                alt="Stivaletti"
                class="lazy"
              />
            </picture>
          </a>
        </li>
        <li>
          <a href="#5">
            <picture>
              <source
                type="image/webp"
                data-srcset="https://via.placeholder.com/256.webp?text=256+WebP+Decollete 256w,
									https://via.placeholder.com/320.webp?text=320+WebP+Decollete 320w,
									https://via.placeholder.com/512.webp?text=512+WebP+Decollete 512w,
									https://via.placeholder.com/640.webp?text=640+WebP+Decollete 640w,
									https://via.placeholder.com/960.webp?text=960+WebP+Decollete 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
              />
              <img
                data-src="https://via.placeholder.com/256.jpg?text=256+Jpg+Decollete"
                data-srcset="https://via.placeholder.com/256.jpg?text=256+Jpg+Decollete 256w,
									https://via.placeholder.com/320.jpg?text=320+Jpg+Decollete 320w,
									https://via.placeholder.com/512.jpg?text=512+Jpg+Decollete 512w,
									https://via.placeholder.com/640.jpg?text=640+Jpg+Decollete 640w,
									https://via.placeholder.com/960.jpg?text=960+Jpg+Decollete 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
                alt="Decollete"
                class="lazy"
              />
            </picture>
          </a>
        </li>
        <li>
          <a href="#6">
            <picture>
              <source
                type="image/webp"
                data-srcset="https://via.placeholder.com/256.webp?text=256+WebP+Ballerine 256w,
									https://via.placeholder.com/320.webp?text=320+WebP+Ballerine 320w,
									https://via.placeholder.com/512.webp?text=512+WebP+Ballerine 512w,
									https://via.placeholder.com/640.webp?text=640+WebP+Ballerine 640w,
									https://via.placeholder.com/960.webp?text=960+WebP+Ballerine 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
              />
              <img
                data-src="https://via.placeholder.com/256.jpg?text=256+Jpg+Ballerine"
                data-srcset="https://via.placeholder.com/256.jpg?text=256+Jpg+Ballerine 256w,
									https://via.placeholder.com/320.jpg?text=320+Jpg+Ballerine 320w,
									https://via.placeholder.com/512.jpg?text=512+Jpg+Ballerine 512w,
									https://via.placeholder.com/640.jpg?text=640+Jpg+Ballerine 640w,
									https://via.placeholder.com/960.jpg?text=960+Jpg+Ballerine 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
                alt="Ballerine"
                class="lazy"
              />
            </picture>
          </a>
        </li>
        <li>
          <a href="#7">
            <picture>
              <source
                type="image/webp"
                data-srcset="https://via.placeholder.com/256.webp?text=256+WebP+Sneakers+2 256w,
									https://via.placeholder.com/320.webp?text=320+WebP+Sneakers+2 320w,
									https://via.placeholder.com/512.webp?text=512+WebP+Sneakers+2 512w,
									https://via.placeholder.com/640.webp?text=640+WebP+Sneakers+2 640w,
									https://via.placeholder.com/960.webp?text=960+WebP+Sneakers+2 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
              />
              <img
                data-src="https://via.placeholder.com/256.jpg?text=256+Jpg+Sneakers+2"
                data-srcset="https://via.placeholder.com/256.jpg?text=256+Jpg+Sneakers+2 256w,
									https://via.placeholder.com/320.jpg?text=320+Jpg+Sneakers+2 320w,
									https://via.placeholder.com/512.jpg?text=512+Jpg+Sneakers+2 512w,
									https://via.placeholder.com/640.jpg?text=640+Jpg+Sneakers+2 640w,
									https://via.placeholder.com/960.jpg?text=960+Jpg+Sneakers+2 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
                alt="Sneakers second"
                class="lazy"
              />
            </picture>
          </a>
        </li>
        <li>
          <a href="#8">
            <picture>
              <source
                type="image/webp"
                data-srcset="https://via.placeholder.com/256.webp?text=256+WebP+OpenToe+2 256w,
									https://via.placeholder.com/320.webp?text=320+WebP+OpenToe+2 320w,
									https://via.placeholder.com/512.webp?text=512+WebP+OpenToe+2 512w,
									https://via.placeholder.com/640.webp?text=640+WebP+OpenToe+2 640w,
									https://via.placeholder.com/960.webp?text=960+WebP+OpenToe+2 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
              />
              <img
                data-src="https://via.placeholder.com/256.jpg?text=256+Jpg+OpenToe+2"
                data-srcset="https://via.placeholder.com/256.jpg?text=256+Jpg+OpenToe+2 256w,
									https://via.placeholder.com/320.jpg?text=320+Jpg+OpenToe+2 320w,
									https://via.placeholder.com/512.jpg?text=512+Jpg+OpenToe+2 512w,
									https://via.placeholder.com/640.jpg?text=640+Jpg+OpenToe+2 640w,
									https://via.placeholder.com/960.jpg?text=960+Jpg+OpenToe+2 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
                alt="Open Toe second"
                class="lazy"
              />
            </picture>
          </a>
        </li>
        <li>
          <a href="#9">
            <picture>
              <source
                type="image/webp"
                data-srcset="https://via.placeholder.com/256.webp?text=256+WebP+Stivali+2 256w,
									https://via.placeholder.com/320.webp?text=320+WebP+Stivali+2 320w,
									https://via.placeholder.com/512.webp?text=512+WebP+Stivali+2 512w,
									https://via.placeholder.com/640.webp?text=640+WebP+Stivali+2 640w,
									https://via.placeholder.com/960.webp?text=960+WebP+Stivali+2 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
              />
              <img
                data-src="https://via.placeholder.com/256.jpg?text=256+Jpg+Stivali+2"
                data-srcset="https://via.placeholder.com/256.jpg?text=256+Jpg+Stivali+2 256w,
									https://via.placeholder.com/320.jpg?text=320+Jpg+Stivali+2 320w,
									https://via.placeholder.com/512.jpg?text=512+Jpg+Stivali+2 512w,
									https://via.placeholder.com/640.jpg?text=640+Jpg+Stivali+2 640w,
									https://via.placeholder.com/960.jpg?text=960+Jpg+Stivali+2 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
                alt="Stivali second"
                class="lazy"
              />
            </picture>
          </a>
        </li>
        <li>
          <a href="#10">
            <picture>
              <source
                type="image/webp"
                data-srcset="https://via.placeholder.com/256.webp?text=256+WebP+Stivaletti+2 256w,
									https://via.placeholder.com/320.webp?text=320+WebP+Stivaletti+2 320w,
									https://via.placeholder.com/512.webp?text=512+WebP+Stivaletti+2 512w,
									https://via.placeholder.com/640.webp?text=640+WebP+Stivaletti+2 640w,
									https://via.placeholder.com/960.webp?text=960+WebP+Stivaletti+2 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
              />
              <img
                data-src="https://via.placeholder.com/256.jpg?text=256+Jpg+Stivaletti+2"
                data-srcset="https://via.placeholder.com/256.jpg?text=256+Jpg+Stivaletti+2 256w,
									https://via.placeholder.com/320.jpg?text=320+Jpg+Stivaletti+2 320w,
									https://via.placeholder.com/512.jpg?text=512+Jpg+Stivaletti+2 512w,
									https://via.placeholder.com/640.jpg?text=640+Jpg+Stivaletti+2 640w,
									https://via.placeholder.com/960.jpg?text=960+Jpg+Stivaletti+2 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
                alt="Stivaletti second"
                class="lazy"
              />
            </picture>
          </a>
        </li>
        <li>
          <a href="#11">
            <picture>
              <source
                type="image/webp"
                data-srcset="https://via.placeholder.com/256.webp?text=256+WebP+Decollete+2 256w,
									https://via.placeholder.com/320.webp?text=320+WebP+Decollete+2 320w,
									https://via.placeholder.com/512.webp?text=512+WebP+Decollete+2 512w,
									https://via.placeholder.com/640.webp?text=640+WebP+Decollete+2 640w,
									https://via.placeholder.com/960.webp?text=960+WebP+Decollete+2 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
              />
              <img
                data-src="https://via.placeholder.com/256.jpg?text=256+Jpg+Decollete+2"
                data-srcset="https://via.placeholder.com/256.jpg?text=256+Jpg+Decollete+2 256w,
									https://via.placeholder.com/320.jpg?text=320+Jpg+Decollete+2 320w,
									https://via.placeholder.com/512.jpg?text=512+Jpg+Decollete+2 512w,
									https://via.placeholder.com/640.jpg?text=640+Jpg+Decollete+2 640w,
									https://via.placeholder.com/960.jpg?text=960+Jpg+Decollete+2 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
                alt="Decollete second"
                class="lazy"
              />
            </picture>
          </a>
        </li>
        <li>
          <a href="#12">
            <picture>
              <source
                type="image/webp"
                data-srcset="https://via.placeholder.com/256.webp?text=256+WebP+Ballerine+2 256w,
									https://via.placeholder.com/320.webp?text=320+WebP+Ballerine+2 320w,
									https://via.placeholder.com/512.webp?text=512+WebP+Ballerine+2 512w,
									https://via.placeholder.com/640.webp?text=640+WebP+Ballerine+2 640w,
									https://via.placeholder.com/960.webp?text=960+WebP+Ballerine+2 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
              />
              <img
                data-src="https://via.placeholder.com/256.jpg?text=256+Jpg+Ballerine+2"
                data-srcset="https://via.placeholder.com/256.jpg?text=256+Jpg+Ballerine+2 256w,
									https://via.placeholder.com/320.jpg?text=320+Jpg+Ballerine+2 320w,
									https://via.placeholder.com/512.jpg?text=512+Jpg+Ballerine+2 512w,
									https://via.placeholder.com/640.jpg?text=640+Jpg+Ballerine+2 640w,
									https://via.placeholder.com/960.jpg?text=960+Jpg+Ballerine+2 960w"
                data-sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33.3vw, 50vw"
                alt="Ballerine second"
                class="lazy"
              />
            </picture>
          </a>
        </li>
      </ul>
    </div>
    <script src="../dist/lazyload.min.js"></script>
    <script>
      (function () {
        function logElementEvent(eventName, element) {
          console.log(Date.now(), eventName, element.getAttribute("data-src"));
        }

        var callback_enter = function (element) {
          logElementEvent("🔑 ENTERED", element);
        };
        var callback_exit = function (element) {
          logElementEvent("🚪 EXITED", element);
        };
        var callback_loading = function (element) {
          logElementEvent("⌚ LOADING", element);
        };
        var callback_loaded = function (element) {
          logElementEvent("👍 LOADED", element);
        };
        var callback_error = function (element) {
          logElementEvent("💀 ERROR", element);
          element.src =
            "https://via.placeholder.com/440x560/?text=Error+Placeholder";
        };
        var callback_finish = function () {
          logElementEvent("✔️ FINISHED", document.documentElement);
        };
        var callback_cancel = function (element) {
          logElementEvent("🔥 CANCEL", element);
        };

        ll = new LazyLoad({
          // Assign the callbacks defined above
          callback_enter: callback_enter,
          callback_exit: callback_exit,
          callback_cancel: callback_cancel,
          callback_loading: callback_loading,
          callback_loaded: callback_loaded,
          callback_error: callback_error,
          callback_finish: callback_finish
        });
      })();
    </script>
  </body>
</html>
